<script>
    import {GoodsList} from './goods'
    export default {
        data() {
            return {
                GoodsList,
                classificationList: [
                    {
                        id: 0,
                        label: '火爆热销'
                    }, {
                        id: 1,
                        label: '新品'
                    }, {
                        id: 2,
                        label: '热带水果'
                    }, {
                        id: 3,
                        label: '进口水果'
                    }, {
                        id: 4,
                        label: '蓝莓果类'
                    },
                    {
                        id: 5,
                        label: '桃李杏枣'
                    }, {
                        id: 6,
                        label: '火龙果'
                    }, {
                        id: 7,
                        label: '柑橘橙柚'
                    }, {
                        id: 8,
                        label: '车厘子'
                    }, {
                        id: 9,
                        label: '葡萄提子'
                    }, {
                        id: 10,
                        label: '苹果梨子'
                    }
                ],
                currentClassID: 0,//当前选中的分类
                filterList: [
                    {
                        id: 0,
                        label: '综合排序'
                    }, {
                        id: 1,
                        label: '按价格'
                    }, {
                        id: 2,
                        label: '按销售'
                    },
                ],
                currentFilterID: 0,
                scroll_height_class:'',//商品分类滑块高度
                scroll_height_goods:'',//商品列表滑块高度
            }
        },
        components: {},
        methods: {
            /**
             * @Description 选中一个分类
             * @author Anonymous
             * @date 2019/6/5
             */
            e_selectClass(id) {
                this.currentClassID = id
            },
            /**
             * @Description 选中一个筛选条件
             * @author Anonymous
             * @date 2019/6/5
             */
            e_selectFilter(id) {
                this.currentFilterID = id
            }


        },
        onShow(){
            let vue_this = this
            wx.getSystemInfo({
                success: function(res) {
                    let windowHeight = wx.getSystemInfoSync().windowHeight // 屏幕的高度
                    let windowWidth = wx.getSystemInfoSync().windowWidth // 屏幕的宽度
                    vue_this.scroll_height_class = `height:${windowHeight * 750 / windowWidth - 261}rpx`
                    vue_this.scroll_height_goods = `height:${windowHeight * 750 / windowWidth - 261-79}rpx`

                    console.log(vue_this.scroll_height)

                },
            })
        },
        mounted() {
        },
        created() {
        }
    }
</script>
<template>
    <div class="ShopInfo">
        <!--店铺内顶部-->
        <div class="shopinfo_top">
            <div class="shopinfo_name">
                <img class="shopLogo"
                     src="https://maishouxiantuan.oss-cn-beijing.aliyuncs.com/ui/shopgoods/house%402x.png" alt="">
                <span class="shopName">原始果园</span>
            </div>
            <div class="shopSerarchArea">
                <div class="searchContainer">
                    <input type="text" class="searchInput" placeholder="搜索店内商品">
                    <img class="searchIcon" src="/static/images/search.png" alt="">
                </div>
            </div>
        </div>
        <!--店铺商品区域-->
        <div class="shopGoodsArea">
            <!--商品分类-->
            <div class="classification">
                <scroll-view :style="scroll_height_class" :scroll-y="true">
                    <div class="classificationList" :class="currentClassID == v.id ? 'activeClass':''"
                         v-for="(v,i) in classificationList" :key="i" @click="e_selectClass(v.id)">
                        <span>{{v.label}}</span>
                    </div>
                </scroll-view>
            </div>
            <!--商品区域-->
            <div class="goodsContainer">
                <!--筛选区域-->
                <div class="filterArea">
                    <span class="filterLabel" :class="currentFilterID == v.id?'activeFilter':''"
                          v-for="(v,i) in filterList" :key="i" @click="e_selectFilter(v.id)">{{v.label}}</span>
                </div>
                <!--商品列表区域-->
                <scroll-view :style="scroll_height_goods" :scroll-y="true">
                    <div class="filterGoodsArea" v-for="(v,i) in GoodsList" :key="i">
                        <img class="goodsIcon"
                             :src="v.goodsIcon"
                             alt="">
                        <div class="goodsInfoArea">
                            <div class="goodsNameArea">
                                <span v-if="v.isCuxiao" class="cuxiaoIcon">促销</span>
                                <span class="goodsName">{{v.goodsName}}</span>
                                <span class="goodsspecification">{{v.guige}}</span>
                            </div>
                            <span class="marketPrice" v-show="v.markePrice != 0">￥{{v.markePrice}}</span>
                            <span class="price">￥{{v.price}}</span>
                            <!--选中数量区域-->
                            <div class="numChangeArea">
                                <img v-if="v.selfNumber != 0" class="lessIcon" src="https://maishouxiantuan.oss-cn-beijing.aliyuncs.com/ui/shopgoods/-%402x.png" alt="">
                                <span v-if="v.selfNumber != 0" class="changeNumber">{{v.selfNumber}}</span>
                                <img class="lessIcon" src="https://maishouxiantuan.oss-cn-beijing.aliyuncs.com/ui/shopgoods/%2B%402x.png" alt="">
                            </div>
                        </div>
                    </div>
                </scroll-view>

            </div>
        </div>
        <!--店铺结算区域-->
        <div class="settleaccounts">
            <div class="settleleft">
                <div class="shopCarArea">
                    <img class="shopCarIcon"
                         src="https://maishouxiantuan.oss-cn-beijing.aliyuncs.com/ui/shopgoods/%E8%B4%AD%E7%89%A9%E8%BD%A6%402x.png"
                         alt="">
                    <span class="shopcarNumber">2</span>
                </div>
                <span class="buyMoney">合计：￥34.7</span>
            </div>
            <div class="settleright">
                <span>去结算</span>
            </div>
        </div>
    </div>
</template>
<style lang='scss'>
    @import "ShopInfo";
</style>
